<template>
    <view class="my-receipt">
        <view class="receipt-container">
            <mescroll-body ref="mescrollRef" auto="false" :down="down" @down="downCallback" @up="upCallback">
                <view class="order-item" v-for="(receipt, index) in receiptList" :key="index">
                    <view class="u-flex u-row-between">
                        <text>订单号：{{ receipt.order_sn }}</text>
                        <text class="u-type-error u-font-24">{{ receipt.add_time | unixToDate }}</text>
                    </view>
                    <view class="u-p-t-20 u-flex u-row-between">
                        <view class="">
                            <view class="u-m-b-10">
                                <text>状态：</text>
                                <text v-if="receipt.status === 0" class="u-type-error">未开票</text>
                                <text v-if="receipt.status === 1" class="u-type-error">已开票</text>
                            </view>
                            <view class="u-m-b-10">
                                <view class="u-m-b-10">
                                    <text>类型：</text>
                                    <text class="u-content-color">{{ receipt.receipt_type | receiptType }}</text>
                                </view>
                            </view>
                        </view>
                        <view v-if="receipt.status === 1">
                            <u-button type="error" size="mini" style="margin: 0;" @click="handleDetail(receipt.history_id)">查看详情</u-button>
                        </view>
                    </view>
                    <view class="sku-order-item" v-for="(sku, skuIndex) in receipt.order_sku_list" :key="skuIndex">
                        <goods-info
                            :goodsName="sku.name"
                            :goodsNum="sku.num"
                            :goodsPrice="sku.subtotal"
                            :goodsImg="sku.goods_image"
                            :goodsSpecList="sku.spec_list"
                        >
                        </goods-info>
                    </view>
                </view>
            </mescroll-body>
        </view>
        <loading-view v-if="loading"></loading-view>
    </view>
</template>

<script>
    import * as API_Members from '@/api/members.js'
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                params: {
                    page_no: 1,
                    page_size: 10,
                },
                //发票列表
                receiptList: [],
                down: {
                    auto: false
                },
                loading: true
            };
        },
        filters: {
            receiptType(type) {
                switch (type) {
                    case 'VATORDINARY' : return '增值税普通发票'
                    case 'ELECTRO' : return '电子普通发票'
                    case 'VATOSPECIAL' : return '增值税专用发票'
                    default: return ''
                }
            }
        },
        methods: {
            //上拉加载数据
            upCallback (page){
                this.params.page_no = page.num
                this.getQueryReceiptInfoList()
            },
            //下拉刷新
            downCallback(){
                this.params.page_no = 1
                this.receiptList = []
                this.getQueryReceiptInfoList()
            },
            //查看详情
            handleDetail(history_id) {
                uni.navigateTo({
                    url: './detail?history_id=' + history_id
                })
            },
            //获取发票列表
            getQueryReceiptInfoList() {
                API_Members.queryReceiptInfoList(this.params).then(response => {
                    const { data } = response
                    this.receiptList.push(...data)
                    this.loading = false
                    this.mescroll.endBySize(data.length, response.data_total)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .order-item {
        margin: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
        padding: 20rpx 20rpx 10rpx 20rpx;
    }
</style>
